﻿@using JinJun.YShow.Model;
@{
    var spce = ViewBag.spec as List<Spec>;
    var spceValue = ViewBag.spceValue as List<Spec_Value>;
    var first = ViewBag.first as List<Category>;
    var brand = ViewBag.brand as List<Brand>;
    var Product = ViewBag.Product as Product_Spu;
    var SpuSpec = ViewBag.SpuSpec as List<Produc_Spu_Spec>;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/jquery.dataTables.min.js"></script>
    <script src="~/js/jquery.dataTables.bootstrap.js"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script src="~/js/hsCheckData.js" type="text/javascript"></script>
    <script src="~/js/dist/echarts-all.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
      <![endif]-->
    <title>添加产品</title>
</head>

<body>
    <div class="margin inside_pages clearfix">
        <div class="add_style clearfix relative">
            <!--品牌展示 当通过品牌管理添加产品是显示该-->
            <div class="Brand_title">
                <div class="Brand_img"><img src="product_img/logo/458.jpg" /><h3>卡姿兰</h3></div>
            </div>
            <ul>
                <li class="clearfix"><label class="label_name col-xs-1"><i>*</i>商品名称：&nbsp;&nbsp;</label><div class="Add_content col-xs-11"><input name="" value="@Product.Name" id="Name" type="text" class="col-xs-6" /></div></li>
                <li class="clearfix"><label class="label_name col-xs-1"><i>*</i>商品编码：&nbsp;&nbsp;</label><div class="Add_content col-xs-11"><input name="" value="@Product.Code" id="Code" type="text" class="col-xs-4" /></div></li>
                <li class="clearfix">
                    <input type="hidden" value="@Product.Id" id="Id" />
                    <label class="label_name col-xs-1"><i>*</i>选择分类：&nbsp;&nbsp;</label><div class="Add_content col-xs-11">
                        <input type="hidden" value="@Product.One_Category_Id" id="firstId" />
                        <input type="hidden" value="@Product.Two_Category_Id" id="twosId" />
                        <input type="hidden" value="@Product.Three_Category_Id" id="threeId" />
                        <select id="first">
                            @for (int i = 0; i < first.Count; i++)
                            {
                                <option value="@first[i].Id">@first[i].Name</option>
                            }
                        </select>
                        <select id="twos">
                        </select>
                        <select id="three">
                        </select>
                    </div>
                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1"><i>*</i>选择品牌：&nbsp;&nbsp;</label><div class="Add_content col-xs-11">
                        <input type="hidden" value="@Product.BrandId" id="BrandId" />
                        <select id="Brand">
                            @for (int i = 0; i < brand.Count; i++)
                            {
                                <option value="@brand[i].Id">@brand[i].Name</option>
                            }
                        </select>
                    </div>
                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1"><i>*</i>设置规格：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        @if (spce != null)
                        {
                            for (int i = 0; i < spce.Count; i++)
                            {
                                <span class="classification_name l_f one" style="height:40px">
                                    <label>
                                        @for (int k = 0; k < SpuSpec.Count; k++)
                                        {
                                            if (SpuSpec[k].Spec_Id == spce[i].Id)
                                            {
                                                <input type="checkbox" id="@spce[i].Id" name="form-field-radio" checked class="ace spvalue" />
                                                break;
                                            }
                                            else if (k == SpuSpec.Count - 1)
                                            {
                                                <input type="checkbox" id="@spce[i].Id" name="form-field-radio" class="ace spvalue" />
                                            }
                                        }
                                        <span class="lbl" id="SpecValue">@spce[i].Spec_Name</span>
                                    </label>
                                    <button type="button" onclick="add_spce(@spce[i].Id)" class="btn bg-deep-blue operation_btn margin-left">添加规格值</button>
                                    <div class="add_category_style @spce[i].Id">
                                        <p class="clearfix">
                                            <input name="" id="Spec_value" type="text" class="l_f form-control" style="width:220px;" /><button style="margin:0px" class="btn button_btn bg-deep-blue l_f add_specvalue" value="@spce[i].Id" id="add_value" type="button">添加</button>
                                        </p>
                                        <p class="Prompt"><em>该分类最多添加10个</em></p>
                                    </div>
                                </span>
                            }
                        }
                        <span class="relative l_f">
                            <button type="button" onclick="add_category()" class="btn bg-deep-blue operation_btn margin-left">添加规格</button>
                            <div class="add_category_style" id="add_category_style">
                                <p class="clearfix">
                                    <input name="" id="Spec_Name" type="text" class="l_f form-control" style="width:220px;" /><button style="margin:0px" class="btn button_btn bg-deep-blue l_f" id="add_category" type="button">添加</button>
                                </p>
                            </div>
                        </span>
                    </div>
                    <label class="label_name col-xs-1"><i>*</i>规格值：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        @if (spceValue != null)
                        {
                            for (int i = 0; i < spceValue.Count; i++)
                            {
                                <span class="classification_name l_f showHide two" value="@spceValue[i].Spec_Id" style="height:40px;display:none">
                                    <label>
                                        @*<input type="checkbox" value="@spceValue[i].Id" name="form-field-radio" class="ace" />*@
                                        <span class="lbl" id="@spceValue[i].Spec_Id">@spceValue[i].Spec_value1</span>
                                    </label>
                                </span>
                            }
                        }
                    </div>
                </li>
                <li class="clearfix">
                    <div class="col-xs-4">
                        <label class="label_name col-xs-3"><i>*</i>商品现价：&nbsp;&nbsp;</label>
                        <div class="Add_content col-xs-9">
                            <input name="" value="@Product.Price" id="Price" type="text" class="col-xs-7" /><em class="Prompt">元</em>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <label class="label_name col-xs-3"><i>*</i>商品重量：&nbsp;&nbsp;</label>
                        <div class="Add_content col-xs-9">
                            <input name="" id="Weight" value="@Product.Weight" type="text" class="col-xs-7" /><em class="Prompt">kg</em>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1">设置有效期：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        <label class="l_f checkbox_time"><input type="checkbox" name="checkbox" class="ace" id="checkbox" /><span class="lbl">是</span></label>
                        <div class="Date_selection" style="display:none">
                            <input name="" id="Shelf_Life" value="@Product.Shelf_Life" type="text" class="col-xs-7" /><em class="Prompt">年/月/日</em>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1">设置生产日期：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        <div class="Date_selectio">
                            <input name="" id="Production_Date" value="@Product.Production_Date" type="text" class="col-xs-7" style="width:12%" />
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="col-xs-4">
                        <label class="label_name col-xs-3">是否上架：&nbsp;&nbsp;</label>
                        <div class="Add_content col-xs-9">
                            @if (Product.Publish_Status == 1)
                            {
                                <label><input type="checkbox" name="checkbox" id="Publish_Status" class="ace" checked="checked" /><span class="lbl">是</span></label>
                            }
                            else
                            {
                                <label><input type="checkbox" name="checkbox" id="Publish_Status" class="ace" /><span class="lbl">是</span></label>
                            }
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <label class="label_name col-xs-3">审核状态：&nbsp;&nbsp;</label>
                        <div class="Add_content col-xs-9">
                            @if (Product.Audit_Status == 1)
                            {
                                <label class="l_f checkbox_time"><input type="checkbox" id="Audit_Status" name="checkbox" class="ace" checked="checked" /><span class="lbl"></span></label>
                            }
                            else
                            {
                                <label class="l_f checkbox_time"><input type="checkbox" id="Audit_Status" name="checkbox" class="ace" /><span class="lbl"></span></label>
                            }
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <label class="label_name col-xs-1"><i>*</i>内容介绍：&nbsp;&nbsp;</label>
                    <div class="Add_content col-xs-11">
                        <script id="editor" type="text/plain" style="width:100%;height:500px;">
                        </script>
                    </div>
                </li>
            </ul>
            <div class="Button_operation btn_width">
                <input class="btn button_btn bg-deep-blue" id="commit" type="button" value="保存并提交" />
                <button class="btn button_btn bg-orange" type="button">保存草稿</button>
                <button class="btn button_btn bg-gray" type="button">取消添加</button>
            </div>
        </div>
    </div>
</body>
</html>
<!--复文本编辑框-->
<script type="text/javascript" charset="utf-8" src="~/js/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/js/utf8-jsp/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="~/js/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<script>
    $(function () {
        var sp = $(".spvalue");
        var show = $(".showHide");
        sp.each(function (i, dom) {
            if ($(this).prop("checked"))
            {
                show.each(function (j, doms) {
                    if ($(this).attr("value") == dom.getAttribute("id")) {
                        $(this).show();
                    }
                });
            }
        });
        


        //选中一级菜单
        var key1 = $("#firstId").val();
        //根据值让option选中
        $("#first option[value='" + key1 + "']").attr("selected", "selected");
        //绑定二级菜单
        var data = {};
        data.Id = $("#first").val();
        var Parent = $("#twos");
        $.ajax({
            url: "/Product/GetSonMenu",
            type: "post",
            data: data,
            success: function (result) {
                var myHTML = "";
                Parent.html("");//赋值之前先清空
                $.each(result, function (i, data) {
                    myHTML += "<option value=" + data.Id + ">" + data.Name + "</option>";

                });
                Parent.append(myHTML);

                //绑定三级菜单
                var dataa = {};
                dataa.Id = $("#twos").val();
                var Parents = $("#three");
                $.ajax({
                    url: "/Product/GetSonMenu",
                    type: "post",
                    data: dataa,
                    success: function (result) {
                        var myHTML = "";
                        Parents.html("");//赋值之前先清空
                        $.each(result, function (i, data) {
                            myHTML += "<option value=" + data.Id + ">" + data.Name + "</option>";

                        });
                        Parents.append(myHTML);

                        //选中二级菜单
                        var key2 = $("#twosId").val();
                        //根据值让option选中
                        $("#twos option[value='" + key2 + "']").attr("selected", "selected");
                        //选中三级菜单
                        var key3 = $("#threeId").val();
                        //根据值让option选中
                        $("#three option[value='" + key3 + "']").attr("selected", "selected");
                    }
                });
            }
        });

        //一级分类下拉框更改事件
        $("#first").change(function () {
            //绑定二级菜单
            var data = {};
            data.Id = $("#first").val();
            var Parent = $("#twos");
            $.ajax({
                url: "/Product/GetSonMenu",
                type: "post",
                data: data,
                success: function (result) {
                    var myHTML = "";
                    Parent.html("");//赋值之前先清空
                    $.each(result, function (i, data) {
                        myHTML += "<option value=" + data.Id + ">" + data.Name + "</option>";

                    });
                    Parent.append(myHTML);
                    //绑定三级菜单
                    var data = {};
                    data.Id = $("#twos").val();
                    var Parents = $("#three");
                    $.ajax({
                        url: "/Product/GetSonMenu",
                        type: "post",
                        data: data,
                        success: function (result) {
                            var myHTML = "";
                            Parents.html("");//赋值之前先清空
                            $.each(result, function (i, data) {
                                myHTML += "<option value=" + data.Id + ">" + data.Name + "</option>";

                            });
                            Parents.append(myHTML);
                        }
                    });
                }
            });

            $("#twos").change(function () {
                //绑定三级菜单
                var dataa = {};
                dataa.Id = $("#twos").val();
                var Parents = $("#three");
                $.ajax({
                    url: "/Product/GetSonMenu",
                    type: "post",
                    data: dataa,
                    success: function (result) {
                        var myHTML = "";
                        Parents.html("");//赋值之前先清空
                        $.each(result, function (i, data) {
                            myHTML += "<option value=" + data.Id + ">" + data.Name + "</option>";

                        });
                        Parents.append(myHTML);
                    }
                });
            });
        });



        var key4 = $("#BrandId").val();
        //根据值让option选中
        $("#Brand option[value='" + key4 + "']").attr("selected", "selected");

        //提交按钮点击事件
        $("#commit").click(function () {
            var ue = UE.getEditor('editor');
            //定义集合
            var ids = [];
            //获取规格值复选框
            var spc = $(".one input:checkbox");
            //遍历规格值复选框
            spc.each(function (i, dom) {
                //判断是否选中
                if ($(this).prop("checked")) {
                    //获取规格Id
                    var id = $(this).attr("id");
                    //增加到集合
                    ids.push({ Id: id });
                }
            });
            var product = {};
            product.Id = $("#Id").val();
            product.One_Category_Id = $("#first").val();
            product.Two_Category_Id = $("#twos").val();
            product.Three_Category_Id = $("#three").val();
            product.Price = $("#Price").val();
            product.Weight = $("#Weight").val();
            product.Production_Date = $("#Production_Date").val();
            product.Shelf_Life = $("#Shelf_Life").val();
            product.Name = $("#Name").val();
            product.Code = $("#Code").val();
            product.Publish_Status = 0;
            product.BrandId = $("#Brand").val();
            if ($("#Publish_Status").prop("checked")) {
                product.Publish_Status = 1;
            }
            product.Audit_Status = 0;
            if ($("#Audit_Status").prop("checked")) {
                product.Audit_Status = 1;
            }
            product.Descript = ue.getPlainTxt();
            var data = {};
            data.specs = ids;
            data.product_Spu = product;
            $.ajax({
                url: "/Product/EditProdusts",
                type: "post",
                data: data,
                success: function (result) {
                    if (result.Success) {
                        layer.msg('新增成功！',
                            {
                                icon: 1,
                                time: 2000,
                                shade: 0.2
                            }, function () {
                                window.location.href = "/Home/Products";
                            });
                    }
                    else {
                        layer.msg('新增失败！',
                            {
                                icon: 1,
                                time: 2000,
                                shade: 0.2
                            });
                    }
                }
            });
        });



        $(".spvalue").change(function () {
            var sp = $(this);
            var show = $(".showHide");
            show.each(function (i, dom) {
                if ($(this).attr("value") == sp.attr("id")) {
                    $(this).toggle();
                }
                //else {
                //    $(this).hide();
                //}
            });
        });

        $("#add_category").click(function () {
            var data = {};
            data.Spec_Name = $("#Spec_Name").val();
            $.ajax({
                url: "/Product/AddSpce",
                type: "post",
                data: data,
                success: function (result) {
                    if (result.Success) {
                        layer.msg('新增成功！',
                            {
                                icon: 1,
                                time: 2000,
                                shade: 0.2
                            }, function () {
                                window.location.reload(true);
                            });
                    }
                    else {
                        layer.msg('新增失败！',
                            {
                                icon: 1,
                                time: 2000,
                                shade: 0.2
                            });
                    }
                }
            })
        });

        $(".add_specvalue").click(function () {
            var data = {};
            data.Spec_value1 = $(this).prev("input").val();
            data.Spec_Id = $(this).attr("value");
            $.ajax({
                url: "/Product/AddSpceValue",
                type: "post",
                data: data,
                success: function (result) {
                    if (result.Success) {
                        layer.msg('新增成功！',
                            {
                                icon: 1,
                                time: 2000,
                                shade: 0.2
                            }, function () {
                                window.location.reload(true);
                            });
                    }
                    else {
                        layer.msg('新增失败！',
                            {
                                icon: 1,
                                time: 2000,
                                shade: 0.2
                            });
                    }
                }
            })
        });
    });


    $(function () {
        var ue = UE.getEditor('editor');
    });
    $(document).ready(function () {
        var spotMax = 8;
        if ($('div.images_Upload').size() >= spotMax) { $(obj).hide(); }
        $("#add_Upload").on('click', function () {
            var cid = $('.images_Upload').each(function (i) { $(this).attr('id', "Uimages_Upload_" + i) });
            addSpot(this, spotMax, cid);
        });
    });
    function addSpot(obj, sm, sid) {
        $("#Upload").append("<div class='images_Upload clearfix margin-bottom' id='" + sid + "'>" +
            "<span class='Upload_img'><input name='' type='file' /></span>" +
            "<a href='javascript:ovid()' class='operating delete_Upload'><i class='fa fa-remove'></i></a>" +
            "<a href='javascript:ovid()' class='operating' onclick='preview_img(this.id)'><i class='fa  fa-image'></i></a>" +
            "</div>&nbsp;")
            .find(".delete_Upload").click(function () {
                if ($('div.images_Upload').size() == 1) {
                    layer.msg('请至少保留一张图片!', { icon: 0, time: 1000 });
                }
                else {
                    $(this).parent().remove();
                    $('#add_Upload').show();
                }

            });
        if ($('.delete_Upload').size() >= sm) { $(obj).hide(); layer.msg('当前为最大图片添加量!', { icon: 0, time: 1000 }); }
    }
    /*checkbox激发事件*/
    $('#checkbox').on('click', function () {
        if ($('input[name="checkbox"]').prop("checked")) {
            $('.Date_selection ').css('display', 'block');
        }
        else {

            $('.Date_selection').css('display', 'none');
        }
    });
    function add_category() {
        $("#add_category_style").toggle();

    }

    function add_spce(id) {
        $("." + id).toggle();

    }
    ///******时间设置*******/
    //var start = {
    //    elem: '#start',
    //    format: 'YYYY/MM/DD hh:mm:ss',
    //    min: laydate.now(), //设定最小日期为当前日期
    //    max: '2099-06-16 23:59:59', //最大日期
    //    istime: true,
    //    istoday: false,
    //    choose: function (datas) {
    //        end.min = datas; //开始日选好后，重置结束日的最小日期
    //        end.start = datas //将结束日的初始值设定为开始日
    //    }
    //};
    //var end = {
    //    elem: '#end',
    //    format: 'YYYY/MM/DD hh:mm:ss',
    //    min: laydate.now(),
    //    max: '2099-06-16 23:59:59',
    //    istime: true,
    //    istoday: false,
    //    choose: function (datas) {
    //        start.max = datas; //结束日选好后，重置开始日的最大日期
    //    }
    //};
    //laydate(start);
    //laydate(end);
    /*********滚动事件*********/
    $("body").niceScroll({
        cursorcolor: "#888888",
        cursoropacitymax: 1,
        touchbehavior: false,
        cursorwidth: "5px",
        cursorborder: "0",
        cursorborderradius: "5px"
    });
</script>
